<!-- 区间标准设置新建 -->
<template>
    <div>
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/intervalStandard' }">区间标准设置</el-breadcrumb-item>
            <el-breadcrumb-item>新增</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            标准名称：
            <el-input style="width: 200px" v-model="newIntervalData.name" maxlength="20" placeholder="请输入标准名称"></el-input>
        </div>
        <div style="margin: 20px 0">设置区间范围（房款-万/套）：</div>
        <ul class="newIntervalList">
            <li>
                <el-input type="text" @input="checkNum(newIntervalData.firstInterval, -1, 0)" :class="errorIndex === 0 ? 'is-error': ''" style="width: 100px" size="mini" v-model="newIntervalData.firstInterval"></el-input>
                以下
            </li>
            <li v-for="(item, index) in newIntervalData.middleInterval">
                <el-input type="text" @input="checkNum(item[0], index, 0)" :class="errorIndex === (index*2+1) ? 'is-error': ''" style="width: 100px" size="mini" v-model="item[0]"></el-input>
                ——
                <el-input type="text" @input="checkNum(item[1], index,1)" :class="errorIndex === (index*2+2) ? 'is-error': ''" style="width: 100px" size="mini" v-model="item[1]"></el-input>
                <a href="javascript:;;" class="del" @click="delInterval(index)">删除</a>
            </li>
            <li>
                <el-button type="primary" size="mini" @click="addInterval">添加</el-button>
            </li>
            <li>
                <el-input type="text" @input="checkNum(newIntervalData.lastInterval,-1, 1)" :class="errorIndex === (newIntervalData.middleInterval.length * 2 + 1) ? 'is-error': ''" style="width: 100px" size="mini" v-model="newIntervalData.lastInterval"></el-input>
                以上
            </li>
        </ul>
        <div>
            <el-button @click="returnList">取消</el-button>
            <el-button type="primary" @click="saveNewInterval">保存</el-button>
        </div>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        name: "intervalStandardAdd",
        data() {
            return {
                errorIndex: "",
                newIntervalData: {
                    name: "",
                    firstInterval: "",
                    middleInterval: [["", ""]],
                    lastInterval: "",
                },
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            checkNum(value, type, index) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                setTimeout(() => {
                    if (type === -1) {
                        if (index === 0) {
                            this.newIntervalData.firstInterval = value
                        } else {
                            this.newIntervalData.lastInterval = value
                        }
                    } else {
                        this.$set(this.newIntervalData.middleInterval[type], index, value)
                    }
                }, 30)
            },
            returnList() {
                this.$router.push({path: "./intervalStandard"})
            },
            addInterval() {
                this.newIntervalData.middleInterval.push(["", ""])
            },
            delInterval(index) {
                this.newIntervalData.middleInterval.splice(index, 1)
            },
            // upInterval(index) {
            //     if (index === 0) {
            //         this.$message({
            //             message: '已经是第一个了~',
            //             type: 'warning'
            //         });
            //     } else {
            //         let beforeInterval = this.newIntervalData.middleInterval[index - 1];
            //         let currentInterval = this.newIntervalData.middleInterval[index];
            //         this.newIntervalData.middleInterval.splice(index - 1, 2, currentInterval, beforeInterval)
            //     }
            // },
            // downInterval(index) {
            //     if (this.newIntervalData.middleInterval.length - 1 === index) {
            //         this.$message({
            //             message: '已经是最后一个了~',
            //             type: 'warning'
            //         });
            //     } else {
            //         let afterInterval = this.newIntervalData.middleInterval[index + 1];
            //         let currentInterval = this.newIntervalData.middleInterval[index];
            //         this.newIntervalData.middleInterval.splice(index, 2, afterInterval, currentInterval)
            //     }
            // },

            checkInterval() {
                this.errorIndex = ''
                if (!this.newIntervalData.name) {
                    this.$message({
                        message: '标准名称不能为空~',
                        type: 'warning'
                    });
                    return false
                }
                if (!this.newIntervalData.firstInterval) {
                    this.errorIndex = 0
                    this.$message({
                        message: '以下区间不能为空~',
                        type: 'warning'
                    });
                    return false
                }
                let rangeList = [{
                    upper: this.newIntervalData.firstInterval,
                    lowerMark: 1,
                    upperMark: 0
                }]

                for (let i = 0, len = this.newIntervalData.middleInterval.length; i < len; i++) {
                    let item = this.newIntervalData.middleInterval[i];
                    let afterItem = "";

                    if (!item[0]) {
                        this.errorIndex = i * 2 + 1;
                        this.$message({
                            message: '区间内容不能为空~',
                            type: 'warning'
                        });
                        return false;
                    }
                    if (!item[1]) {
                        this.errorIndex = i * 2 + 2;
                        this.$message({
                            message: '区间内容不能为空~',
                            type: 'warning'
                        });
                        return false;
                    }

                    if (+item[0] > +item[1]) {
                        this.errorIndex = i * 2 + 1;
                        this.$message({
                            message: '同一区间内容前者不能大于后者~',
                            type: 'warning'
                        });
                        return false;
                    }


                    // 判断如果小于上一区间
                    if (i === 0) {
                        afterItem = this.newIntervalData.firstInterval;
                        if (+afterItem > +item[0]) {
                            this.errorIndex = 0
                            this.$message({
                                message: '不能大于下一区间内容~',
                                type: 'warning'
                            });
                            return false;
                        }
                    } else {
                        afterItem = this.newIntervalData.middleInterval[i - 1][1];
                        if (+afterItem > +item[0]) {
                            this.errorIndex = i * 2;
                            this.$message({
                                message: '不能大于下一区间内容~',
                                type: 'warning'
                            });
                            return false;
                        }
                    }
                    rangeList.push({
                        lower: item[0],
                        upper: item[1],
                        lowerMark: 0,
                        upperMark: 0
                    })
                }

                if (!this.newIntervalData.lastInterval) {
                    this.errorIndex = this.newIntervalData.middleInterval.length * 2 + 1
                    this.$message({
                        message: '以上区间不能为空~',
                        type: 'warning'
                    });
                    return false
                }
                let length = this.newIntervalData.middleInterval.length;
                if (+this.newIntervalData.lastInterval < +this.newIntervalData.middleInterval[length - 1][1]) {
                    this.errorIndex = this.errorIndex = length * 2;
                    this.$message({
                        message: '不能大于下一区间内容~',
                        type: 'warning'
                    });
                    return false
                }

                rangeList.push({
                    lower: this.newIntervalData.lastInterval,
                    lowerMark: 0,
                    upperMark: 1
                })
                return rangeList
            },

            saveNewInterval() {
                let rangeList = this.checkInterval();
                if (rangeList) {
                    this.axios.post(api.createRange, {
                        name: this.newIntervalData.name,
                        rangeList: rangeList
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '新增成功~',
                                type: 'success'
                            });
                            this.returnList()
                        }
                    })
                }
            },
        },
        components: {},
        computed: {}
    }

</script>

<style lang="stylus">

    .newIntervalList {
        list-style: none;
        padding: 0;
        li {
            margin-top: 20px;
            a {
                text-decoration: none;
                margin: 0 10px;
            }
            .del {
                color: #f00;
            }
            .is-error {
                input {
                    border-color: #f56c6c !important;
                    box-shadow: 1px 1px 10px #f00;
                }
            }
        }
    }

</style>